<template>
      <div class="app-container">
        <!--主表信息-->
        <el-form ref="form" class="modalform" :inline="true" label-width="120px">
          <div>
            <el-form-item label="客户名称" prop="name">
              <el-input :value="form.name" readonly style="width: 300px"/>
            </el-form-item>
          </div>
          <el-form-item label="应收账款余额">
            <el-input :value="attachUnit2(form.recbalance, '元')" readonly />
          </el-form-item>
          <el-form-item label="预收款余额">
            <el-input :value="attachUnit2(form.prebalance, '元')" readonly />
          </el-form-item>
          <el-form-item label="状态">
            <el-input :value="form.statusname" readonly />
          </el-form-item>
          <el-form-item label="地址">
<!--            <el-input :value="form.address" readonly/>-->
            <template slot-scope="scope">
              <span>{{form.province}}{{form.city}}{{form.district}}{{form.address}}</span>
            </template>
          </el-form-item>
        </el-form>
        <el-tabs v-model="tableType" @tab-click="tableQuery">
          <el-tab-pane v-for="item in labels" :label="item.name" :name="item.type"></el-tab-pane>
        </el-tabs>
        <template v-if="tableType=='record'">
          <el-table :data="recordData" style="margin-bottom: 40px" v-loading="loadingRecird">
            <el-table-column label="订单编号" align="center" prop="code">
              <template slot-scope="scope">
                <span @click="toSellForm(scope.row.linkid)" style="cursor: pointer;color: #00afff">{{scope.row.code}}</span>
              </template>
            </el-table-column>
            <el-table-column label="发生额" align="center" prop="amount"/>
            <el-table-column label="应收账款余额" align="center" prop="recbalance"/>
            <el-table-column label="备注" align="center" prop="remark"/>
            <el-table-column label="创建时间" align="center" prop="createtime"/>
            <el-table-column label="创建人" align="center" prop="operator"/>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getRecord"
          />
        </template>
        <template v-if="tableType=='sellform'">
          <el-table :data="sellformList" style="margin-bottom: 40px" v-loading="loadingSellform">
            <el-table-column label="订单编号" align="center" prop="sellcode">
              <template slot-scope="scope">
                <span @click="toSellForm(scope.row.id)" style="color: #00afff;cursor: pointer">{{scope.row.sellcode}}</span>
              </template>
            </el-table-column>
            <el-table-column label="结算金额" align="center" prop="finalamount"/>
            <el-table-column label="下单日期" align="center" prop="createtime"/>
            <el-table-column label="出库日期" align="center" prop="loadDate"/>
            <el-table-column label="预计账期" align="center" prop="settlebilling">
              <template slot-scope="scope" v-if="scope.row.settlebilling">
                <span>{{scope.row.settlebilling}}天</span>
              </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center" prop="statusname"/>
            <el-table-column label="创建人" align="center" prop="applyname"/>
          </el-table>
          <pagination
            v-show="total1>0"
            :total="total1"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getSellForm"
          />
        </template>
      </div>
</template>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.el-tag {
  width: 56px;
  text-align: center;
}
</style>
<script>
  import { getCustomer2, getReceivableList } from "@/api/customer/customer";
  import {listSellform,sellFormList} from '@/api/bill/sellform'
  import variables from '@/assets/styles/variables.scss'

  export default {
    name: 'recbalanceinfo',
    components: {
    },
    data() {
      return {
        loading: true,
        loading2: true,
        loadingSellform:true,
        loadingRecird:true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        total1:0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        labels:[
          {type:'record',name:'应收款流水记录'},
          {type:'sellform',name:'应收销售订单'}
        ],
        tableType:'record',
        recordData:[],
        cashflows: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          customerguid: null,
          moneybackStatusNo:null,
          minstatusL:null,
          paytypes:null,
        },
        permission: [],
        fileList: [],
        orders: [],
        guid:'',
        sellformList:[],
      }
    },
    computed: {
      variables() {
        return variables;
      },
    },
    async created() {
      this.id = this.$route.query.id;
      this.guid=this.$route.query.guid;
      await this.getCustomer();
      // this.getCusCashflow();
      this.tableQuery();
    },
    methods: {
      toSellForm(id){
        console.log('id:-',id)
        this.$router.push({path:'/bill/sellforminfo',query:{id:id}})
      },
      tableQuery(tab,event){
        if (this.tableType=='record'){
          this.getRecord();
        }else if (this.tableType=='sellform'){
          this.getSellForm();
        }
      },
      async getCustomer() {
        await getCustomer2({id: this.id}).then(response => {
          this.form = response.data;
          this.orders = response.data.sellforms;
          this.loading = false;
        })
      },
      getRecord(){
        this.queryParams.paytypes=null;
        this.queryParams.minstatusL=null;
        this.queryParams.moneybackStatusNo=null;
        this.queryParams.customerguid=null;
        this.queryParams.customerid=this.guid
        getReceivableList(this.queryParams).then(response=>{
          this.recordData=response.rows;
          this.total=response.total;
          this.loadingRecird=false;
        })
      },
      getSellForm(){
        this.queryParams.paytypes='2,3'
        this.queryParams.minstatusL=55;
        this.queryParams.customerid=null;
        this.queryParams.customerguid=this.guid;
        this.queryParams.moneybackStatusNo=3;
        sellFormList(this.queryParams).then(response=>{
          this.sellformList=response.rows;
          this.total1=response.total;
          this.loadingSellform=false;
        })
      },
      // 取消按钮
      cancel2() {
        this.open2 = false;
        this.reset2();
      },
      // 表单重置
      reset2() {
        this.form2 = {
          guid: null,
          code: null,
          wlguid: null,
          wlcode: null,
          customerguid: null,
          customername: null,
          freightclaim: null,
          faretype: null,
          deliprovince: null,
          delicity: null,
          delidistrict: null,
          deliaddress: null,
          arriprovince: null,
          arricity: null,
          arridistrict: null,
          arriaddres: null,
          drivername: null,
          driverphone: null,
          carcode: null,
          delicontact: null,
          delicontacttel: null,
          arricontact: null,
          arricontactno: null,
          senddate: null,
          arrivedate: null,
          loadtime: null,
          unloadtime: null,
          fareprice: null,
          farepricetype: null,
          status: 0,
          amount: null,
          fareweight: null,
          type: null,
          operatorid: null,
          operator: null,
          createtime: null,
          lastupdate: null,
          approvalflag: null,
          containerno: null,
          deliport: null,
          arriport: null,
          othercost: null,
          otherremark: null,
          deductamount: null,
          deductremark: null,
          befdeductamount: null,
          transtype: null,
          flowid: null,
          relatedid: null,
          departid: null,
          departname: null,
          environment: null,
          lifttype: null,
          arriportcountry: null,
          transclause: null,
          remark: null,
          shipcompany: null,
          shipname: null,
          shipcode: null,
          liftcode: null,
          boxtype: null,
          boxsize: null,
          boxcode: null,
          delifactory: null,
          cargodate: null,
          cartype: null,
          mainidsea: null,
          kdcode: null,
          sort: null,
          hook: null,
          orgid: null,
          orgname: null,
          paystatus: null
        };
        this.resetForm("form2");
      },
      /** 新增按钮操作 */
      handleAdd() {
        // this.reset();
        this.getWlinfos();
        this.open = true;
        this.title = "添加物流订单";
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.guid)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getWlinfos();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      cancel() {
        this.open = false;
        this.fareApply = {};
      },
      /** 提交按钮 */
      submitForm() {
        let params = {
          farepayGuid: this.farepay.id,
          wlinfoids: this.ids.join(',')
        };
        addFarepDetail(params).then(response => {
            this.msgSuccess("添加成功");
            this.open = false;
            this.getFarepay()
          });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除该数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delFarepDetail(ids);
        }).then(() => {
          this.getFarepay()
          this.msgSuccess("删除成功");
        })
      },

      //上传相关
      handlePreview(file) {
        if (file.url) {
          let url = `http://${location.host}/prod-api${file.url}`;
          location.href = url;
        }
      },
      // beforeRemove(file, fileList) {
      //   return this.$confirm(`确定移除 ${file.name}？`);
      // },
      // handleUpload(response, file, fileList) {
      //   if (response.code == 200) {
      //     this.fileList.push({id: response.id, name: response.originalName, url: response.url});
      //   }
      // },
      handleRemove(file, fileList) {
        this.fileList = this.fileList.filter(item => {
          return item.id != file.id;
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$sideBarWidth});
    transition: width 0.28s;
  }

  .hideSidebar .fixed-header {
    width: calc(100% - 54px)
  }

  .mobile .fixed-header {
    width: 100%;
  }

  .app-wrapper > > > .el-input {
    color: #999;
  }

  .upload {
    /*margin-top: 20px;*/
  }

  .rj-input {
    display: inline-block;
    height: 26px;
    line-height: 26px;
  }

  .rj-label {
    font-size: 14px;
    color: #606266;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    font-weight: 600;
    display: inline-block;
    text-align: right;
  }

  .rj-text {
    color: #606266;
    font-size: inherit;
    padding: 0 15px;
    font-size: 14px;
    display: inline-block;
  }

  .modalform .el-form-item {
    margin-bottom: 0 !important;
  }
  .modalinput {
    width: 260px !important;
  }
</style>
